import React, { useState, useEffect } from 'react';
import { Modal, Table } from 'antd';
import { Pagination } from '@/components';
import moment from 'moment';
import styles from './index.less';

const TurnDoingModal = ({ visible, setVisible, onOk, onCancel }) => {
    const [confirmLoading, setConfirmLoading] = useState(false);
    const [data, setData] = useState([]);
    const [pagination, setPagination] = useState({});
    const columns = [
        {
            title: '序号',
            dataIndex: 'id',
            key: 'id',
            render(text, record, index) {
                return index + 1;
            }
        },
        {
            title: '任务编号',
            dataIndex: 'taskId',
            key: 'taskId'
        },
        {
            title: '任务名称',
            dataIndex: 'taskName',
            key: 'taskName'
        },
        {
            title: '执行人',
            dataIndex: 'peopleName',
            key: 'peopleName'
        },
        {
            title: '部门',
            dataIndex: 'positionName',
            key: 'positionName'
        },
        {
            title: '开始时间',
            dataIndex: 'startTime',
            key: 'startTime',
            render: (text, record) => <span>{moment(record.operateTime).format('MM-DD HH:mm')}</span>
        }
    ];
    const handleOk = () => {
        if (onOk) onOk();
        setVisible(false);
    };

    const handleCancel = () => {
        if (onCancel) onCancel();
        setVisible(false);
    };

    const getData = () => {
        setConfirmLoading(true);
        // const params = {
        //     taskId: urlQuery.id,
        //     pageSize: pagination.pageSize || 10,
        //     pageNo: pagination.current || 1
        // };
        // const result = await getOperateCon(params);

        // if (result.code === 10000) {
        //     const { data = {} } = result;
        //     const { ...rest } = data;
        //     setPagination({ ...rest, current: rest.pageNo });
        //     setList(data.rows || []);
        // } else {
        //     message.error(result.msg);
        // }
        setConfirmLoading(false);
        setData([
            {
                id: 0,
                taskId: '456756',
                taskName: '任务名称任务名称',
                peopleName: '王菲',
                positionName: '产品部',
                startTime: '2020-05-13 18:00:00'
            },
            {
                id: 0,
                taskId: '45673356',
                taskName: '任务名称任务名称',
                peopleName: '王菲',
                positionName: '产品部',
                startTime: '2020-05-13 18:00:00'
            },
            {
                id: 0,
                taskId: '4536756',
                taskName: '任务名称任务名称',
                peopleName: '王菲',
                positionName: '产品部',
                startTime: '2020-05-13 18:00:00'
            },
            {
                id: 0,
                taskId: '4567546',
                taskName: '任务名称任务名称',
                peopleName: '王菲',
                positionName: '产品部',
                startTime: '2020-05-13 18:00:00'
            },
            {
                id: 0,
                taskId: '4567565',
                taskName: '任务名称任务名称',
                peopleName: '王菲',
                positionName: '产品部',
                startTime: '2020-05-13 18:00:00'
            },
            {
                id: 0,
                taskId: '4567526',
                taskName: '任务名称任务名称',
                peopleName: '王菲',
                positionName: '产品部',
                startTime: '2020-05-13 18:00:00'
            },
            {
                id: 0,
                taskId: '4561756',
                taskName: '任务名称任务名称',
                peopleName: '王菲',
                positionName: '产品部',
                startTime: '2020-05-13 18:00:00'
            },
            {
                id: 0,
                taskId: '45672256',
                taskName: '任务名称任务名称',
                peopleName: '王菲',
                positionName: '产品部',
                startTime: '2020-05-13 18:00:00'
            },
            {
                id: 0,
                taskId: '45673456',
                taskName: '任务名称任务名称',
                peopleName: '王菲',
                positionName: '产品部',
                startTime: '2020-05-13 18:00:00'
            },
            {
                id: 0,
                taskId: '4567536',
                taskName: '任务名称任务名称',
                peopleName: '王菲',
                positionName: '产品部',
                startTime: '2020-05-13 18:00:00'
            },
            {
                id: 0,
                taskId: '4567156',
                taskName: '任务名称任务名称',
                peopleName: '王菲',
                positionName: '产品部',
                startTime: '2020-05-13 18:00:00'
            },
            {
                id: 0,
                taskId: '4567256',
                taskName: '任务名称任务名称',
                peopleName: '王菲',
                positionName: '产品部',
                startTime: '2020-05-13 18:00:00'
            }
        ]);
        setPagination({ current: 1, pageSize: 10, pageNo: 2 });
    };

    /* 表格翻页获取数据 */
    const handleTableChange = async page => {
        const isSetPagination = page !== undefined;

        if (isSetPagination) {
            setPagination({ ...pagination, ...page });
        }
    };

    useEffect(() => {
        console.log('11111111111111');
        getData();
    }, [pagination.pageSize, pagination.current]);

    return (
        <Modal
            title="转进行中详情"
            visible={visible}
            confirmLoading={confirmLoading}
            onOk={handleOk}
            onCancel={handleCancel}
            style={{ maxHeight: '85%', overflow: 'auto', paddingBottom: 0 }}
        >
            <div className={styles.acTime}>*实际开始时间：2020-05-06 18:00</div>
            <p className={styles.tips}>逾期影响提示：当前任务已逾期，或将影响以下后置任务进度</p>
            <div className={styles.tableBox}>
                <Table columns={columns} rowKey="taskId" dataSource={data} pagination={false} />
                <Pagination {...pagination} onChange={handleTableChange} />
            </div>
        </Modal>
    );
};

export default TurnDoingModal;
